<template>
    <van-skeleton title :row="3" />
    <div>
<van-nav-bar
  title="标题"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
  fixed
/>
<div style="height: 45px;"></div>
<van-search
  v-model="valuess"
  shape="round"
  background="#4fc08d"
  placeholder="请输入搜索关键词"
/>
<div class="box" v-show="souye">
    <div class="lishi">
<h4>历史记录</h4>
<van-tag type="primary">标签</van-tag>
<van-tag type="success">标签</van-tag>
<van-tag type="danger">标签</van-tag>
<van-tag type="warning">标签</van-tag>
    </div>
    <div class="lishi">
<h4>热门搜索</h4>
<van-tag type="primary">标签</van-tag>
<van-tag type="success">标签</van-tag>
<van-tag type="danger">标签</van-tag>
<van-tag type="warning">标签</van-tag>
    </div>
</div>
<div class="dyg" v-show="!souye">
    <van-cell-group v-for="item in qsearchApiData">
  <van-cell :title="item.goods_name" />
</van-cell-group>
</div>
<van-empty description="描述文字" v-show="kong"/>
    </div>
</template>

<script setup>
import { ref,watch } from "vue";
import { qsearchApi } from "@/api/api";
import _ from "lodash";
let qsearchApiData=ref([])
import router from "@/router";
import _default from "vant";
let valuess=ref('')
const onClickLeft=()=>{
    router.push('/home/cara')
}
let souye=ref(true)
let kong=ref(false)
watch(valuess,(val)=>{
    if(val.length==0){
        souye.value=true
        kong.value=false
    }else{
        souye.value=false
        qsearchApi(val).then(res=>{
            qsearchApiData.value=res.data.message
            console.log('搜索',res.data.message);
            if(qsearchApiData.value.length==0){
                kong.value=true
            }else{
                kong.value=false
            }
        })
    }
})

</script>

<style scoped>
.van-tag{
    margin: 10px;
    width: 60px;height: 30px;
}
</style>